<template>
  <div>
    <click-home></click-home>
    <div class="top">
      <headertop></headertop>
      <con-swiper :key="dataList.length">
        <con-swiper-item
          v-for="(data, index) in dataList"
          @click="headerClick(index)"
          :key="index"
        >
          <div class="inner">
            <img :src="convertImg(data.pic)" />
          </div>
        </con-swiper-item>
      </con-swiper>
    </div>
    <ul class="list" :style="{'height':heigh}">
      <li v-for="tast in tastList" :key="tast.cid" @click="headerClick(tast.cid)">
        <img :src="convertImg(tast.img)" alt="" class="tupian" />
        <div>
          <p>{{ tast.title }}</p>
          <p :class="tast.host ? '' : 'hidden'" :style="{ color: '#aaa' }">
            [主持]{{ tast.host }}
          </p>
        </div>
        <div class="ding">
          <span>{{ tast.num }}人</span>
          <i class="iconfont icon-more"></i>
        </div>
      </li>
    </ul>
    <navbottom></navbottom>
  </div>
</template>
<script>
import getJson from '../directive/getjson'
import conSwiper from '../components/content/ConSwiper.vue'
import conSwiperItem from '../components/content/ConSwiperItem.vue'
import headertop from '../components/headers/header.vue'
import clickHome from '../components/headers/clickHome.vue'
export default {
  data () {
    return {
      dataList: [],
      tastList: [],
      heigh: ''
    }
  },
  components: {
    conSwiper,
    conSwiperItem,
    headertop,
    clickHome
  },
  methods: {
    convertImg (path) {
      return path.replace('http', 'https')
    },
    headerClick (key) {
      // console.log(123)
      this.$router.push('/liaotianshi')
      // console.log(key)
    }
  },
  mounted () {
    getJson(
      'https://y.tuwan.com/m/Chatroom/getAppH5RoomListV2?format=jsonp&from=3&callback=jQuery331019079256539829403_1627521448083&_=1627521448084',
      (res) => {
        console.log(res.banner)
        this.dataList = res.banner
        this.tastList = res.roomlist
      }
    )
    const toph = document.querySelector('.top')
    this.heigh = document.documentElement.clientHeight - toph.clientHeight + 'px'
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
body,
html {
  height: 100%;
  font-size: 16px;
}
.top {
  position: sticky;
  top: 0;
  z-index: 999;
}
.inner {
  height: 100px;
  width: 100%;
  img {
    width: 100%;
  }
}

.list {
  background: #f6f6f6;
  margin-bottom: 100px;
  //padding-top: 150px;
 // height: 500px;
  overflow: scroll;
  li {
    position: relative;
    display: flex;
    padding: 10px;
    .tupian {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      padding-left: 10px;
      padding-right: 10px;
    }
    .hidden {
      visibility: hidden;
      font-size: 12px;
      color: gray;
    }
    .ding {
      position: absolute;
      right: 10px;
      top: 50%;
      color: #aaa;
      font-size: 10px;
    }
  }
}
</style>
